<template>
  <div>
    <van-form @submit="onSubmit">
      <van-divider content-position="left">个人信息</van-divider>
      <van-field v-model="form.name" name="姓名" label="姓名" placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"/>
      <van-field v-model="form.number" name="证件号码" label="证件号码" placeholder="证件号码"
        :rules="[{ required: true, message: '请填写证件号码' }]"/>
      <van-field v-model="form.phone" type="tel" name="手机号码" label="手机号码" placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"/>
      <van-field v-model="form.occupation" readonly clickable @click="showOccupation = true" 
      type="tel" name="职业" label="职业" placeholder="请选择职业"/>
      <van-popup v-model="showOccupation" position="bottom">
        <van-picker
          show-toolbar
          value-key="dictLabel"
          :columns="occupationLists"
          @confirm="onConfirm"
          @cancel="showOccupation = false"
        />
      </van-popup>

      <van-divider content-position="left">行程信息</van-divider>
      <van-field :value="form.returnTime" readonly clickable name="返济时间" label="返济时间" placeholder="返济时间"
        :rules="[{ required: true, message: '请填写返济时间' }]" @click="showTimePicker = true" />
        <van-popup v-model="showTimePicker" position="bottom">
          <van-datetime-picker
            type="date"
            @confirm="onConfirm"
            @cancel="showTimePicker = false"
          />
        </van-popup>
      <van-field v-model="form.destinationType" name="出发地类型" label="出发地类型" placeholder="出发地类型"
        :rules="[{ required: true, message: '请填写出发地类型' }]">
        <template #input>
          <van-radio-group v-model="form.destinationType" direction="horizontal">
            <van-radio name="1">境内</van-radio>
            <van-radio name="2">港澳台</van-radio>
            <van-radio name="3">境外</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field readonly clickable name="area" :value="form.destination" label="出发地" placeholder="点击选择地址" 
        @click="showArea = true" :rules="[{ required: true, message: '请选择出发地' }]"/>
      <van-popup v-model="showDestinationArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showDestinationArea = false"
        />
      </van-popup>
      <van-field v-model="form.destinationAddress" type="tel" name="出发地详细地址" label="出发地详细地址" placeholder="请具体到乡村,村居,小区名,楼栋号单元室等"
        :rules="[{ required: true, message: '请选择出发地详细地址' }]"/>
      <van-field :value="form.returnTraffic" name="交通方式" label="交通方式" placeholder="交通方式"
        :rules="[{ required: true, message: '请填写交通方式' }]">
        <template #input>
          <van-radio-group v-model="form.returnTraffic" direction="horizontal">
            <van-radio v-for="(item, index) in vehicleList" :name="item.dictValue" :key="index">{{item.dictLabel}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-divider content-position="left">身体状况</van-divider>
      <van-field :value="form.detectionTime" readonly clickable name="市内核算检测时间（或计划做核酸检测时间）" label="市内核算检测时间（或计划做核酸检测时间）" placeholder=""
        :rules="[{ required: true, message: '请选择时间' }]" @click="showTimePicker = true" />
        <van-popup v-model="showTimePicker" position="bottom">
          <van-datetime-picker
            type="date"
            @confirm="onConfirm"
            @cancel="showTimePicker = false"
          />
        </van-popup>
      <van-field v-model="form.isDiagnosis" name="14天内是否被诊断为新冠肺炎确诊患者、疑似患者、阳性感染者或曾有发热、持续干咳、乏力症状" label="14天内是否被诊断为新冠肺炎确诊患者、疑似患者、阳性感染者或曾有发热、持续干咳、乏力症状" placeholder=""
        :rules="[{ required: true, message: '请填写交通方式' }]">
        <template #input>
          <van-radio-group v-model="form.dd" direction="horizontal">
            <van-radio name="0">否</van-radio>
            <van-radio name="1">是</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getDict, getAreaList } from '@/api/index'
import { areaList } from '@vant/area-data';
export default {
  name: 'ReportInto',
  data() {
    return {
      form: {},
      showArea: false,
      showPicker: false,
      showDestinationArea: false,
      showOccupation: false,
      showTimePicker: false,
      areaList,
      localAreaList: [],
      occupationLists: [],
      vehicleList: []
    }
  },
  mounted() {
    getDict('occupation_dict').then(res => {
      this.occupationLists = res.data
    })
    getDict('vehicle_dict').then(res => {
      this.vehicleList = res.data
    })
    this.getAreaList()
  },
  methods: {
    getAreaList(parentCode = '3708', item) {
      getAreaList({
        useLocale: true,
        parentCode
      }).then(res => {
        console.log(res)
        const list = res.data.map(i => {
            return {
              ...i,
              children: i.parent ? [] : null
            }
          })
        if(item) {
          item.children = list
        } else {
          this.localAreaList = list
        }
      })
    },
    onSubmit(values) {
      console.log('submit', values);
    },
    onConfirm(values) {
      console.log(values)
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    onChange(e) {
      this.getAreaList(e.value, e.selectedOptions[0])
    },
    onFinish({ selectedOptions }) {
      // console.log(selectedOptions)
      this.showArea = false;
      this.localAreaList = selectedOptions.map((option) => option.text).join('/');
    },
    //  onConfirm(value) {
    //   this.value = value;
    //   this.showPicker = false;
    // },
  },
}
</script>

<style>

</style>